<template>
	<view class="userinfo">
		<view class="form" @click="chooseImg">
			<button class="avatar-wrap" open-type="chooseAvatar">
				<view class="label"> 头像 </view>
				<view v-if="userinfo.avatarUrl != null" class="ipt">
					<img class="avatar" :src="userinfo.avatarUrl" />
				</view>
				<view v-else class="ipt">
					<img class="avatar"
						src="https://img2.baidu.com/it/u=3854158804,1500513467&fm=253&fmt=auto&app=120&f=JPEG?w=575&h=500" />
				</view>
			</button>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 昵称 </view>
			<view class="nickname_right">
				<input v-model="userinfo.nickname" placeholder="请输入您的昵称" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 性别 </view>
			<radio-group  @change="radioChange">
				<radio style="margin-right: 15px;" :checked="maleDisplay" value="0">
					<span>男</span>
				</radio>
				<radio :checked="femaleDisplay" value="1">
					<span>女</span>
				</radio>
			</radio-group>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 手机号 </view>
			<view class="nickname_right">
				<view class="showphone">
					<input v-model="userinfo.phone" placeholder="请输入您的手机号" />
				</view>
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 邮箱 </view>
			<view class="nickname_right">
				<view class="showphone">
					<input v-model="userinfo.email" placeholder="请输入您的邮箱" />
				</view>
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 住址 </view>
			<view class="nickname_right">
				<view class="showphone">
					<input v-model="userinfo.address" placeholder="请输入您的家庭住址" />
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button type="warn" class="btn" @click="saveinfo">保存</button>
		</view>
	</view>
</template>

<script>
import { editUserInfo, getUserInfoById } from '../../api/user/index'
export default {
	data() {
		return {
			maleDisplay: false,
			femaleDisplay: false,
			addressData: {
				sex: 0,
			},
			sex:
				[
					{
						id: 1,
						label: "男",
						value: "0"
					},
					{
						id: 2,
						label: "女",
						value: "1"
					}
				],
			avatar: '',
			phone: '',
			number: 2,
			userinfo: {}
		}
	},
	created() {
		this.userLoad()
	},
	methods: {
		userLoad() {
			// 本地缓存中同步获取指定 key 对应的内容
			try {
				const value = uni.getStorageSync('userinfo');
				if (value) {
					this.userinfo = JSON.parse(value)
					// 默认展示男和女
					if(this.userinfo.sex == 0){
						this.maleDisplay = true
					}else{
						this.femaleDisplay = true
					}
				}
				console.log(this.userinfo);
			} catch (e) {
				console.log(e);
			}
		},
		radioChange(e) {
			this.userinfo.sex = parseInt(e.detail.value)
			console.log(e);
		},

		chooseImg() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					const tempFilePath = tempFilePaths[0];
					uni.uploadFile({
						url: 'http://localhost:8888/file/upload/img', // 替换为实际的上传接口地址
						filePath: tempFilePath,
						name: 'file',
						success: (res) => {
							console.log("111111");
							console.log(res);
							this.userinfo.avatarUrl = res.data
						},
						fail: (err) => {
							console.error(err);
						},
					});
				},
			});

		},
		saveinfo() {
			// 修改用户信息
			editUserInfo(this.userinfo).then(res => {
				if (res.code == 200) {
					// 更新用户信息
					getUserInfoById(this.userinfo.id).then(res => {
						if (res.code == 200) {
							try {
								uni.setStorageSync('userinfo', JSON.stringify(res.data));
							} catch (e) {
								uni.showToast({
									title: '更新信息失败',
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'error',
									//显示持续时间为 2秒
									duration: 2000
								})
							}
						}
					})
					uni.showToast({
						title: '修改成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
button::after {
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.userinfo {
	font-size: 34rpx;
	font-weight: 400;
	color: #333333;
	height: 100%;
	position: relative;

	.form {
		background-color: #ffffff;
	}

	.avatar-wrap {
		border: 0;
		background-color: #ffffff;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;

		.avatar {
			margin-right: 10rpx;
		}

		.ipt {
			display: flex;
			align-items: center;
		}

		img {
			width: 118rpx;
			height: 118rpx;
		}
	}

	.info_nickname {
		border-bottom: 1px solid #e9e9e9;
		height: 112rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		// justify-content: space-between;

		.nickname_left {}

		.nickname_right {
			input {
				text-align: right;
			}
		}

		.gender {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.btn-wrap {
		position: absolute;
		width: 100%;
		text-align: center;

		.btn {
			width: 690rpx;
			height: 88rpx;
		}
	}
}
</style>
